<script>

import {
  getDeleteQ,
  getEvaluationAdd, getEvaluationsubmit,
  getEvaluationTitle,
  getUpdateEvaluation,
} from "@/api/tool/scheduling/funScheduling";
import {getEdmitState} from "@/api/tool/scheduling/scheduling";
import {getToken} from "@/utils/auth";

export default {
  name: "management",
  data() {
    return {
      //输入框
      ruleForm: {
        name: '',
        region: '',
      },
      //分页参数
      query: {
        pageNum: 1,
        pageSize: 10,
      },
      //表格数据
      tableData: [{
        index: '',
        name: '',
        createTime: '',
        enable: '',
      }],
      //原始数据
      tableList: [],
      //添加
      dialogFormVisible: false,
      formLabelWidth: '100px',
      form: {
        name: '',
        region: '',
      },
      // 添加传参
      addEvaluation: {
        name: '',
        enable: '',
      },
      // 编辑
      edmitList: {
        id: Number,
        name: '',
        enable: ''
      },
      submitEvaluationList: {
        id: Number,
        name: '',
        enable: '',
      },
      //导入
      dialogVisible: false,
      handleClick: false,
      //   测评名称
      evaluationList: {
        pageSize: 10,
        pageNum: 1,
        name: ''
      },
      evaluationTitleList: [],
      flag: '',
      radio: '1',
      //   输入框
      text: '',
      // textarea: ''
      headers: {
        Authorization: "Bearer " + getToken(), //headers属性中添加token，这个属性是el-upload自带的用来设置上传请求头部
      },
      // action: process.env.VUE_APP_BASE_API + "http://localhost/management", //action就写成上传文件的接口我这里是动态设置请求地址
    }

  },
  methods: {
    load() {
      // 测评名称
      getEvaluationTitle(this.evaluationList).then(res => {
        this.evaluationTitleList = res.rows
        this.tableData = res.rows
        // console.log(this.evaluationTitleList)
        this.tableData.forEach(item => {
          if (item.enable === '1') {
            this.flag = "正常"
          } else {
            this.flag = "禁用"
          }
          return item.enable = this.flag
        })

      })
    },
    // 搜索
    search(name) {
      this.evaluationList.name = name
      // console.log(this.evaluationList)
      this.evaluationTitleList.forEach(item => {
        // console.log(item)
        if (this.evaluationList.name == item.id) {
          this.evaluationList.name = item.name
        }
      })
      getEvaluationTitle(this.evaluationList).then(res => {
        // console.log(res)
      })
      this.load()
    },
    // 新增
    add() {
      this.dialogFormVisible = false
      getEvaluationAdd(this.addEvaluation).then(res => {
        // console.log(res)
      })
      this.load()
    },
    //编辑
    edmit(row) {
      this.handleClick = true
      // console.log(row)
      this.edmitList = row
      if (row.enable === '正常') {
        this.edmitList.enable = '正常'
      } else {
        this.edmitList.enable = '禁用'
      }
      getUpdateEvaluation(row.id).then(res => {
        // console.log(res)
      })
    },
    edmitEvaluationSubmit() {
      // console.log(this.edmitList)
      this.handleClick = false
      getEvaluationsubmit(this.edmitList).then(res => {
        // console.log(res)
      })
      this.tableData = [{
        index: '',
        name: '',
        createTime: '',
        enable: '',
      }]
      this.load()
    },
    //删除
    del(row) {
      // console.log(row)
      this.$confirm('此操作将永久删除该测评信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // console.log(typeof row.id)
        getDeleteQ(row.id).then(res => {
          // console.log(res)
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.load()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //分页方法
    handleCurrentChange(val) {
      // console.log(val)
      this.query.pageSize = 10
      this.query.pageNum = val
      // console.log( this.query.pageNum)
      getEvaluationTitle(this.query).then(res => {
        // console.log(res)
        this.tableData = res.rows
      })
    },
    // 导入确认按钮
    confirms() {
      getEdmitState().then(res => {
        // console.log(res)
      })
      this.dialogVisible = false
      this.load()
    }

  },
  created() {
    this.load()

  },

}
</script>

<template>
  <div>
    <div class="app">
      <div class="app-main">
        <div style="padding: 40px;">
          <div class="app-main-header">
            <!--      测试       -->
            <el-form ref="ruleForm" :model="ruleForm" :inline="true" class="demo-ruleForm"
                     label-width="100px">
              <el-form-item label="测评名称">
                <el-select v-model="ruleForm.region" value="请选择测评" placeholder="请选择测评"
                           @change="search(ruleForm.region)" clearable>
                  <el-option v-for="item in this.evaluationTitleList" :label="item.name" value="信息学院"
                             :key="item.id"
                             :value="item.id"
                  >

                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <!--            //添加、导入按钮-->
            <div class="addbtn" style="margin-left: 35px">
              <!-- Form -->
              <el-button type="primary" @click="dialogFormVisible = true">添加</el-button>
              <el-button type="primary" @click="dialogVisible = true">导入</el-button>
            </div>
            <!--            //表格内容-->
            <div class="tableBox" style="margin-top:20px;margin-left: 35px;">
              <el-table
                :data="tableData"
                border
                style="width: 100%"
              >
                <el-table-column
                  label="序号"
                  type="index"
                  width="110">
                </el-table-column>
                <el-table-column
                  label="测评名称"
                  prop="name"
                  width="240">
                </el-table-column>
                <el-table-column
                  label="创建时间"
                  prop="createTime"
                  width="377"
                >
                </el-table-column>
                <el-table-column
                  label="状态"
                  prop="enable"
                  width="200">
                </el-table-column>
                <el-table-column
                  label="操作"
                  width="240"
                >
                  <template slot-scope="scope">
                    <el-button size="small" type="text">
                      <router-link :to="{path:'/heartDetails',query:{id:scope.row.id}}">详情</router-link>
                    </el-button>
                    <el-button size="small" type="text" @click="edmit(scope.row)">编辑</el-button>
                    <el-button size="small" type="text">
                      <router-link :to="{path:'/setupmgnt',query:{id:scope.row.id}}">设置</router-link>
                    </el-button>
                    <el-button size="small" type="text" @click="del(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!--              分页按钮-->
              <div class="pag-btn" style="margin-top: 30px;float: right">
                <el-pagination
                  :total="20"
                  background
                  layout="prev, pager, next"
                  @current-change="handleCurrentChange">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--    添加-->
    <div class="formBox">
      <el-dialog :center="true" :visible.sync="dialogFormVisible" title="添加"
                 width="430px">
        <el-form :model="form">
          <el-form-item :label-width="formLabelWidth" label="测评信息">
            <el-input autocomplete="off" maxlength="20" placeholder="请输入测评名称" v-model="addEvaluation.name"
                      style="width: 280px"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="状态">
            <el-radio v-model="addEvaluation.enable" label="1" disabled>正常</el-radio>
            <el-radio v-model="addEvaluation.enable" label="0">停用</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">保 存</el-button>
        </div>
      </el-dialog>
    </div>
    <!--    导入-->
    <div class="input">
      <el-dialog
        :center="true"
        :visible.sync="dialogVisible"
        title="测评导入"
        width="30%">
        <el-upload
          :headers="headers"
          class="upload-demo"
          drag
          action="http://1.117.81.216:8086/stage-api//evaluation/management/title/import"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">仅允许导入xls、xlsx格式文件.
            <a href="/测评导入模板.xlsx" download style="color: #00afff">下载模板</a></div>
        </el-upload>
        <div style="text-align: center;margin-top: 15px">
          <el-button type="primary" @click="dialogVisible=false">取消</el-button>
          <el-button type="primary" @click="confirms">确认</el-button>
        </div>

      </el-dialog>
    </div>
    <!--        编辑        -->
    <div>
      <el-dialog :center="true"
                 :visible.sync="handleClick"
                 title="编辑"
                 width="430px">
        <el-form :model="edmitList">
          <el-form-item :label-width="formLabelWidth" label="测评信息">
            <!--            <el-input  autocomplete="off" maxlength="20"   :value="edmitList.name"  clearable-->
            <!--                       style="width: 280px"></el-input>-->
            <el-input
              type="text"
              placeholder="请输入内容"
              v-model="edmitList.name"
              maxlength="10"
              show-word-limit
            >
            </el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="状态">
            <!--          label="1"   正常  -->
            <el-radio v-model="edmitList.enable" label="1">正常</el-radio>
            <el-radio v-model="edmitList.enable" label="0">禁用</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleClick = false">取 消</el-button>
          <el-button type="primary" @click="edmitEvaluationSubmit(edmitList)">保 存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.input {
  .upload-demo {
    margin-left: 25px;
  }
}

::v-deep .el-dialog__header {
  text-align: left;
  padding: 20px;
  padding-bottom: 10px;
  background-color: #1892ff;
}

::v-deep .el-table__cell {
  text-align: center;
}

::v-deep .el-input--medium .el-input__inner {
  color: #cccccc;
}

::v-deep .el-dialog__title {
  color: white;
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: white;
}

::v-deep .el-input--medium .el-input__inner {
  color: #cccccc;
  width: 200px;
  height: 36px;
}

::v-deep .el-input__suffix {
  position: absolute;
  height: 100%;
  right: 10px;
  top: 0;
}
</style>
